﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Customization Settings</title>

    <link href="scripts/Site.css" rel="stylesheet">
    <link href="scripts/jquery-ui.structure.min.css" rel="stylesheet">
    <link href="scripts/jquery-ui.theme.min.css" rel="stylesheet">
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script src="scripts/jquery-ui.min.js"></script>
    <link href="scripts/jquery.appendGrid-1.5.0.css" rel="stylesheet">
    <link href="scripts/jquery-ui.theme.alternate.min.css" rel="stylesheet">
    <script src="scripts/jquery.appendGrid-1.5.0.js"></script>



    <script>
        // Initialize appendGrid
        $(function () {

            // Add new row to grid
            $('#tblAppendGrid').appendGrid({
                caption: 'User ID / Name Cross Reference',
                initRows: 1,
                columns: [
                        { name: 'UserID', display: 'User ID', type: 'number', ctrlAttr: { maxlength: 2 }, ctrlCss: { width: '50px' } },
                        { name: 'Name', display: 'Name', type: 'text', ctrlAttr: { maxlength: 20 }, ctrlCss: { width: '150px' } },
                        { name: 'Division', display: 'Division', type: 'number', ctrlAttr: { maxlength: 1 }, ctrlCss: { width: '25px' } },
                        { name: 'RecordId', type: 'hidden', value: 0 }
                ]
            });

            //// Handle `Load` button click
            //$('#btnLoad').button().click(function () {
            //    $('#tblAppendGrid').appendGrid('load', [
            //        { 'UserID': 4, 'Name': 'Andy', 'Division': 2, 'RecordId': 123 },
            //        { 'UserID': 1, 'Name': 'Hawkeye', 'Division': 1, 'RecordId': 125 }
            //    ]);
            //});

            //// Handle `Serialize` button click
            //$('#btnSerialize').button().click(function () {
            //    alert('Here is the serialized data!!\n' + $(document.forms[0]).serialize());
            //    //$('#dat').val = $(document.forms[0]).serialize()
            //});

            //$('#btn').click(function () {
            //    var data = GetDivisionUsers(2);
            //    alert(data);
            //});
            
            $('#btnSave').click(function () {
                if (localStorage) {
                    SaveData();
                    $('#resultMessage').html('Settings have been saved.');
                }
                else {
                    alert('Your device doesn&amp;t allow for saving of settings.')
                }
            });

            $('#btnExport').click(function () {
                if (localStorage) {
                    var exportData = new Object();
                    exportData.userid = localStorage.getItem('userid');
                    //exportData.division = localStorage.getItem('division');
                    exportData.grid = localStorage.getItem('grid');
                    $('#settingsdata').val(JSON.stringify(exportData));
                    $('#resultMessage').html('Settings have been exported.  Copy and paste them into another device to load your settings.');
                }
            });

            $('#btnImport').click(function () {
                // Verify settings are there
                if ($('#settingsdata').val().length == 0) {
                    $('#resultMessage').html('No settings to import from text area.');
                    return;
                }

                try {
                    // Verify settings are valid JSON
                    var response = $.parseJSON($('#settingsdata').val());
                    if (typeof response == 'object') {
                        //It is JSON
                        var importData = JSON.parse($('#settingsdata').val());
                        LoadData(importData);
                    }
                    else {
                        if (response === false) {
                            //the response was a string "false", parseJSON will convert it to boolean false
                            $('#resultMessage').html('Invalid data to import.');
                            return;
                        }
                        else {
                            //the response was something else
                            $('#resultMessage').html('Invalid data to import.');
                            return;
                        }
                    }
                }
                catch (e) {
                    //Handle errors here
                    $('#resultMessage').html('Error importing data.');
                    return;
                }
            });



            // Load data to screen if local storage available
            if (localStorage) {
                LoadData();
            }

           

        });

       
        function SaveData() {
            if (localStorage) {
                // Save form elements to local storage
                localStorage.setItem("userid", $('#userid').val());
                //localStorage.setItem("division", $('#division').val());


                var data = $('#tblAppendGrid').appendGrid('getAllValue');
                var userArray = [];


                $.each(data, function (index) {
                    var row = $('#tblAppendGrid').appendGrid('getRowValue', index);
                    // Get the Album from data object
                    var userEntry = new Object();
                    userEntry.userid = row.UserID;
                    userEntry.name = row.Name;
                    userEntry.division = row.Division;
                    userArray.push(userEntry);
                });

                // Store array in local storeage
                localStorage.setItem('grid', JSON.stringify(userArray));
            }
        };


        function LoadData(data) {
            if (localStorage) {
                if (data == null) {
                    $('#userid').val(localStorage.getItem('userid'));
                    //$('#division').val(localStorage.getItem('division'));

                    // Load Grid
                    var data = JSON.parse(localStorage.getItem('grid'));
                    $.each(data, function (i, item) {
                        $('#tblAppendGrid').appendGrid('appendRow', [
                            { 'UserID': data[i].userid, 'Name': data[i].name, 'Division': data[i].division, 'RecordId': i }
                        ]);
                    });
                    $('#tblAppendGrid').appendGrid('removeRow', 0);
                }
                else {
                    $('#userid').val(data.userid);
                    //$('#division').val(data.division);
                    //// Clear grid
                    $('#tblAppendGrid').appendGrid('load');

                    // Load Grid
                    var data = JSON.parse(data.grid);
                    $.each(data, function (i, item) {
                        $('#tblAppendGrid').appendGrid('appendRow', [
                            { 'UserID': data[i].userid, 'Name': data[i].name, 'Division': data[i].division, 'RecordId': i }
                        ]);
                    });
                }

            }
        };

        function GetDivisionUsers(division)
        {
            var users = [];

            if (localStorage) {
                // Load Grid
                var data = JSON.parse(localStorage.getItem('grid'));
                $.each(data, function (i, item) {
                    if (data[i].division == division) {
                        var user = new Object();
                        user.userid = data[i].userid;
                        user.name = data[i].name;
                        users.push(user);
                    }
                });
            }

            return users;
        }



    </script>
</head>

<body style="padding: 5px;">
    <form>

        <h2>Customization Settings</h2>

        <hr />

        <h4>User &amp; Division</h4>
        <div>
            <span style="font-size: smaller">
                By entering your user id or name and division your picks will be shown with a different front so its easier to find.  Otherwise leave it blank.<br />
            </span>
        </div>
        <div>
            &nbsp;
        </div>
        <div>
            User ID or Name:&nbsp;
            <input type="text" id="userid" name="userid" size="4" />
            &nbsp;
            &nbsp;
            <!--Division:&nbsp;
            <select id="division">
                <option value="1">Division 1</option>
                <option value="2">Division 2</option>
            </select>-->
        </div>
        <div>
            &nbsp;
        </div>

        <hr />

        <h4>User ID / Name Cross Reference</h4>
        <div>
            <span style="font-size: smaller">Assign names to user id's to customize the grid when it is displayed to show names instead of numbers.</span>
        </div>
        <div>
            &nbsp;
        </div>

        <div id="divSource">
            <table id="tblAppendGrid" class="appendGrid ui-widget">
                <thead class="ui-widget-header">
                    <tr>
                        <td id="tblAppendGrid_caption_td" class="ui-state-active caption" colspan="8">User ID / Name Cross Reference</td>
                    </tr>
                    <tr>
                        <td class="ui-widget-header"></td>
                        <td id="tblAppendGrid_UserID_td_head" class="ui-widget-header">User ID</td>
                        <td id="tblAppendGrid_Name_td_head" class="ui-widget-header">Name</td>
                        <td id="tblAppendGrid_Division_td_head" class="ui-widget-header">Name</td>
                        <td class="ui-widget-header"></td>
                    </tr>
                </thead>
                <tbody class="ui-widget-content">
                    <tr id="tblAppendGrid_Row_1">
                        <td class="ui-widget-content first">1</td>
                        <td id="tblAppendGrid_UserID_td_1" class="ui-widget-content"><input type="text" id="tblAppendGrid_UserID_1" name="tblAppendGrid_UserID_1" maxlength="2" style="width: 50px;"></td>
                        <td id="tblAppendGrid_Name_td_1" class="ui-widget-content"><input type="text" id="tblAppendGrid_Name_1" name="tblAppendGrid_Name_1" maxlength="20" style="width: 150px;"></td>
                        <td id="tblAppendGrid_Division_td_1" class="ui-widget-content"><input type="text" id="tblAppendGrid_Division_1" name="tblAppendGrid_Division_1" maxlength="1" style="width: 25px;"></td>
                        <td class="ui-widget-content last"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only insert" role="button" title="Insert Row Above" id="tblAppendGrid_Insert_1" tabindex="-1"><span class="ui-button-icon-primary ui-icon ui-icon-arrowreturnthick-1-w"></span><span class="ui-button-text"></span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only remove" role="button" title="Remove Current Row" id="tblAppendGrid_Delete_1" tabindex="-1"><span class="ui-button-icon-primary ui-icon ui-icon-trash"></span><span class="ui-button-text"></span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only moveUp" role="button" title="Move Up" id="tblAppendGrid_MoveUp_1" tabindex="-1"><span class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-n"></span><span class="ui-button-text"></span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only moveDown" role="button" title="Move Down" id="tblAppendGrid_MoveDown_1" tabindex="-1"><span class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-s"></span><span class="ui-button-text"></span></button><input id="tblAppendGrid_RecordId_1" name="tblAppendGrid_RecordId_1" type="hidden" value="0"></td>
                    </tr>
                </tbody>
                <tfoot class="ui-widget-header">
                    <tr>
                        <td id="tblAppendGrid_footer_td" colspan="8">
                            <input type="hidden" id="tblAppendGrid_rowOrder" name="tblAppendGrid_rowOrder" value="1">
                            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only append" role="button" title="Append Row"><span class="ui-button-icon-primary ui-icon ui-icon-plusthick"></span><span class="ui-button-text"></span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only removeLast ui-state-focus" role="button" title="Remove Last Row"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text"></span></button>
                        </td>
                    </tr>
                </tfoot>
            </table>

            <br>
            <!--<button id="btnLoad" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
                <span class="ui-button-text">
                    Demo: Load Data
                </span>
            </button>
            <button id="btnSerialize" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
                <span class="ui-button-text">
                    Demo: jQuery Serialize
                </span>
            </button>-->

        </div>
        <!--<div>
            <fieldset>
                <legend>Name Goes Here</legend>

                Name: <input type="text" name="somebodyname" />
            </fieldset>
        </div>-->


        <div>
            &nbsp;
        </div>


        <div>
            <input type="button" name="btnSave" id="btnSave" value="SAVE" />
            <input type="reset" id="btnReset" value="RESET" />
        </div>
        <div>
            &nbsp;
        </div>
        <div>
            <input type="button" id="btnImport" name="btnImport" value="IMPORT SETTINGS" />
            <input type="button" id="btnExport" name="btnExport" value="EXPORT SETTINGS" />
            <!--<input type="button" id="btn" name="btn" value="test" />-->
        </div>
        <div>
            <textarea id="settingsdata" rows="10" cols="100"></textarea>
        </div>

        <div>
            &nbsp;
        </div>
        <div>
            <span id="resultMessage"></span>
        </div>
        <div>
            <a href='javascript:void(0);return false;' onclick="window.history.back()">BACK</a>
        </div>
    </form>
</body>
</html>
